<template>
	<HCard>
		<template #head>
			<view class="head">
				<view class="head-left">
					<text>附件</text>
				</view>
				<view class="head-right">
					<HButton :block="false" size="small" plain @click="onPhotograph">拍照</HButton>
					<HButton :block="false" size="small" plain @click="onVideo">录像</HButton>
					<HButton :block="false" size="small" plain @click="onUpload">上传附件</HButton>
				</view>
			</view>
			<template v-if="tips">
				<view class="sub">
					<text>{{tips}}</text>
				</view>
			</template>
		</template>
		<template #body>
			<view class="body">
				<ul class="file-wrapper">
					<li class="file-item" v-for="(item,index) in attachment " :key="item.timestamp">
						<view class="file-item-left">
							<u-icon color="#409EFF" size="24" :name="item.icon"></u-icon>
							<span @click="onOpen(item)" class="file-item-left__text">{{item.file.fileName | rightEllipsis }}</span>

						</view>
						<view class="file-item-right">
							<u-icon name="close" color="#98A5B3" size="18" @click="onRemoveAttachment(index)">
							</u-icon>
						</view>
					</li>
				</ul>
			</view>
		</template>
	</HCard>

</template>

<script>
	import HCard from '@/components/card/components/cardBaseWrapper.vue'
	import HButton from '@/components/button/index.vue'
	export default {
		props: {
			tips: String,
			data: {
				type: Object,
				default: () => {
					return {}
				}
			}
		},
		data() {
			return {
				attachment: []
			}
		},
		components: {
			HCard,
			HButton
		},

		watch: {
			data: {

				handler: function(val) {
					let attach = this.data?.manufacturerInfoVo?.enclosure || '[]'
					attach = JSON.parse(attach)
					let index = 0
					for (let i of attach) {
						let val = {
							icon: 'file-text',
							timestamp: index,
							name: i.name,
							file: {
								fileName: i.name,
								url: i.url,

							}
						}
						this.$set(this.attachment, index, val)
						index++
					}
				},
				deep: true,
			}
		},

		methods: {
			onOpen(item) {
				console.log(item, 'item');
				this.$open(item.file.url)
			},
			onRemoveAttachment(index) {
				this.attachment.splice(index, 1)
			},
			//拍照
			async onPhotograph() {
				let img = await this.$chooseImg()
				this.attachment.push({
					icon: 'photo',
					file: img,
					timestamp: Date.now()
				})
			},
			// 录像
			async onVideo() {
				let video = await this.$chooseVideo()
				this.attachment.push({
					icon: 'play-circle',
					file: video,
					timestamp: Date.now()
				})
			},

			//上传附件
			async onUpload() {
				let file = await this.$uploadfile()
				this.attachment.push({
					icon: 'file-text',
					file: file,
					timestamp: Date.now()
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.m {
		&-r-20 {
			margin-right: 20rpx;
		}
	}

	.head {
		display: flex;
		flex-direction: row;
		align-items: center;

		&-left {
			flex: 1;
		}

		&-right {
			flex: 3;
			text-align: right;
			text-align: right;
			display: flex;
			justify-content: space-between;
		}
	}

	.sub {
		font-family: AlibabaPuHuiTi_2_55_Regular;
		font-weight: 400;
		font-size: 24rpx;
		color: #98A5B3;
	}

	.file {

		&-item {
			height: 100rpx;
			line-height: 100rpx;
			box-shadow: 0rpx -2rpx 0rpx 0rpx #F5F7FA;
			display: flex;
			flex-direction: row;
			align-items: center;

			&-left {
				width: 95%;

				&__text {
					font-weight: 400;
					font-size: 28rpx;
					display: inline-block;
					color: #409EFF;
					margin-left: 10rpx;

				}
			}

			&-right {
				width: 5%;
			}
		}
	}
</style>
